/*
 * @Author: lyuan2018
 * @Date: 2019-08-08 10:59:35
 * @Last Modified by: lyuan2018
 * @Last Modified time: 2020-08-20 15:56:40
 * 邮件设置--账户管理--监测结果页面
 */
import React from 'react';
import classnames from 'classnames';
import { toJS } from 'mobx';
import { Modal, Icon } from 'antd';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

export const ResultPage = (validateLoading, validateResult, mailType) => {
  const mailState =
    toJS(validateResult) == null ? false : toJS(validateResult).mailState;
  const isResultNull = toJS(validateResult) == null; // 接口异常返回情况下判定
  const preCls = 'account-result';
  const prefixCls = classnames({
    [`${preCls}-container-main-body`]: true,
    'success-loading': validateLoading || mailState,
  });
  const noResult =
    toJS(validateResult) == null
      ? false
      : Object.keys(validateResult).length === 0;
  const resultList = [
    {
      key: 'smtpState',
      jsonKey: 'smtpState',
      content: `${getLabel(82877, '查找发送邮件服务器')}(SMTP)`,
    },
    {
      key: 'smtpLoginState_1',
      jsonKey: 'smtpLoginState',
      content: `${getLabel(82878, '登录到发送邮件服务器')}(SMTP)`,
    },
    {
      key: 'smtpLoginState_2',
      jsonKey: 'smtpLoginState',
      content: `${getLabel(82883, '发送邮件测试')}`,
    },
    {
      key: 'popState',
      jsonKey: 'popState',
      content: `${getLabel(82881, '查找接收邮件服务器')}${
        mailType == 1 ? '(POP3)' : '(IMAP)'
      }`,
    },
    {
      key: 'popLoginState',
      jsonKey: 'popLoginState',
      content: `${getLabel(82882, '登录到接收邮件服务器')}${
        mailType == 1 ? '(POP3)' : '(IMAP)'
      }`,
    },
  ];
  return (
    <div className={preCls}>
      <div className={`${preCls}-container-header`}>
        <div className="icon">
          {validateLoading ? (
            <Icon
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_Icon@28ref5`}
              type="loading"
              className="validate-loading"
            />
          ) : (
            <img
              src={`/images/ecology9/email/add_account_${
                mailState ? 'succ' : 'fail'
              }.png`}
            />
          )}
        </div>
        <p className="result-info">
          {validateLoading || noResult
            ? ''
            : mailState
            ? getLabel(384432, '邮件账户检测通过！')
            : getLabel(82862, '邮件账户检测不通过！请检查设置！')}
        </p>
      </div>
      <div className={`${preCls}-container-main`}>
        {isResultNull ? (
          <div className={prefixCls}>
            <span className={'result-info-null'}>
              配置出错，请联系系统管理员
            </span>
          </div>
        ) : (
          <div className={prefixCls}>
            {resultList.map(item => (
              <div key={item.key} className={`${preCls}-container-main-check`}>
                <span className={`${preCls}-container-main-check-item`}>
                  {validateLoading || noResult ? (
                    <Icon
                      ecId={`${
                        (this && this.props && this.props.ecId) || ''
                      }_Icon@u3xhkm@loading`}
                      type="loading"
                    />
                  ) : (
                    <i
                      className={`icon-coms-${
                        toJS(validateResult).json[item.jsonKey].ischeck
                          ? 'Upload-successfully-o'
                          : 'Clear'
                      }`}
                    />
                  )}
                  {item.content}
                </span>
                {!validateLoading &&
                  !noResult &&
                  !toJS(validateResult).json[item.jsonKey].ischeck && (
                    <span className={`${preCls}-container-main-check-nopass`}>
                      <i className="icon-coms-Prompt" />
                      <span
                        className="msg"
                        title={
                          toJS(validateResult).json[item.jsonKey].errormess
                            .errorHint
                        }
                      >
                        {
                          toJS(validateResult).json[item.jsonKey].errormess
                            .errorHint
                        }
                      </span>
                      <span
                        className="log"
                        onClick={() => {
                          Modal.warning({
                            content: toJS(validateResult).json[item.jsonKey]
                              .errormess.errorString,
                          });
                        }}
                      >
                        {getLabel(17480, '查看日志')}
                      </span>
                    </span>
                  )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};
